<template>
  <van-submit-bar
    label="需付款"
    text-align="left"
    :price="orderDetails.actualPayment * 100"
  >
    <template #tip> 请在 {{countDown()}} 内完成支付，超时订单将取消 </template>
    <template #button>
      <van-button class="out" round plain @click="onCancelOrder()"
        >取消问诊</van-button
      >
      <van-button class="next" round plain type="success" @click="goPayment">继续支付</van-button>
    </template>
  </van-submit-bar>

  <!-- 支付弹出层 -->
  <PayPopup v-model="isShow" :orderId="orderDetails.id" payCallback="https://cp.itheima.net/room"  :actualPayment="orderDetails.actualPayment" isOrderDetail="1"></PayPopup>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'

const emits = defineEmits(['cancelOrder', 'fetchOrderDetails'])

const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {}
  }
})

// 倒计时
const time = ref(null)
const countDown = () => {
  // 当前时间戳
  const currentTime = +new Date()
  // 创建订单时间戳
  const createTimes = +new Date(props.orderDetails.createTime)
  // 倒计时秒数
  time.value = 900 - (currentTime - createTimes) / 1000
  const m = parseInt(time.value / 60 % 60)
  const minute = m < 10 ? '0' + m : m
  const s = parseInt(time.value % 60)
  const second = s < 10 ? '0' + s : s
  return `00:${minute}:${second}`
}

const timeId = setInterval(() => {
  // 如果倒计时结束 关闭定时器 重新获取数据
  if (time.value < 0) {
    clearInterval(timeId)
    onCancelOrder()
  }
  countDown()
}, 1000)

// 取消问诊
const onCancelOrder = () => {
  emits('cancelOrder')
}

// 控制弹出层显示隐藏
const isShow = ref(false)
// 继续支付
const goPayment = () => {
  isShow.value = true
}
</script>

<style lang="scss" scoped>
::v-deep .van-submit-bar__tip{
    text-align: center;
    padding: 28px 0;
    font-size: 28px;
    background: #fff7eb;
    color: #f2994a;
}
</style>
